<template>
  <uni-popup ref="popupRef" @change="onChangePopup" :is-mask-click="isMaskClick" :mask-click="isMaskClick">
    <view class="content">
      <view class="header">
        <view class="header-title">{{ title }}{{ titleIndex }}</view>
        <ve-icon name="delete-data" size="22" @click="onClose" />
      </view>
      <view class="body">
        <view class="cell">
          <view class="label">工单号</view>
          <view class="value">
            <template v-if="form?.handleFlag">
              <view class="link" @click="() => handleClickGo('work', form)">{{ form?.workOrderNo }}</view>
            </template>
            <template v-else>
              {{ form?.workOrderNo }}
            </template>
            <ve-tag
              :color="getWorkOrderColor(form?.workOrderStatus)"
              :background="getWorkOrderBg(form?.workOrderStatus)"
              :title="form?.workOrderStatusName"
              :fontSize="14"
            />
          </view>
        </view>
        <view class="cell">
          <view class="label">关联单号</view>
          <view class="value">
            <view class="link" @click="() => handleClickGo('order', form)">{{ form?.orderNo }} | {{ form?.orderTypeName }}</view>
          </view>
        </view>
        <!-- 预计取还车 -->
        <template v-if="form?.workOrderType !== 3">
          <view class="cell">
            <view class="label">{{ getLabel(details, 'expect') }}</view>
            <view class="value">{{ getValue(details, 'expect') || '-' }}</view>
          </view>
          <!-- 实际取还车 -->
          <view class="cell" v-if="form?.realUseCarTime || form?.realReturnCarTime">
            <view class="label">{{ getLabel(details, 'real') }}</view>
            <view class="value">{{ getValue(details, 'real') || '-' }}</view>
          </view>
          <!-- 交还车信息 -->
          <view class="cell">
            <view class="label">{{ getTypeLabel(details) }}</view>
            <view class="value">{{ getTypeValue(details) || '-' }}</view>
          </view>
        </template>
        <template v-else>
          <view class="cell">
            <view class="label">换车信息</view>
            <view class="value">{{ form?.changCarTime }}</view>
          </view>
          <view class="cell">
            <view class="label">换下车信息</view>
            <view class="value">{{ form?.replaceCarLicenseNo }} {{ form?.replaceVin }}</view>
          </view>
          <view class="cell">
            <view class="label">换上车信息</view>
            <view class="value">{{ form?.changeCarLicenseNo }} {{ form?.changeVin }}</view>
          </view>
        </template>
      </view>

      <view class="footer">
        <ve-button
          class="footer-btn"
          type="link"
          v-if="form?.agoWorkOrderId"
          @click="handleChange(form.agoWorkOrderId, 'pre')"
          :loading="preLoading"
        >
          上一条
        </ve-button>
        <ve-button
          class="footer-btn"
          type="link"
          v-if="form?.afterWorkOrderId"
          @click="handleChange(form.afterWorkOrderId, 'next')"
          :loading="preLoading"
        >
          下一条
        </ve-button>
        <ve-button class="footer-btn" type="link" v-if="form?.handleFlag" @click="() => handleClickGo('work', form)">去处理</ve-button>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { getChangeCarOrder } from '@/api/driver/driver'

  const popupRef = ref()
  const preLoading = ref(false)
  const title = ref('')
  const titleIndex = ref(1)
  const form = ref<any>({})
  const details = ref({})

  defineProps({
    isMaskClick: {
      type: Boolean,
      default: true,
    },
  })

  const open = (record: any) => {
    console.log('record', record)

    details.value = record
    title.value = record.label
    popupRef.value.open('center')

    let workOrderId = ''
    switch (record.label) {
      case '交车单':
        workOrderId = record.giveCarOrderId
        break
      case '还车单':
        workOrderId = record.returnCarOrderId
        break
      case '换车单':
        workOrderId = record.changeCarOrderId
        break
    }
    handleChange(workOrderId)
  }

  const getLabel = (record: any, type: string) => {
    switch (record.label) {
      case '交车单':
        return type === 'expect' ? '预计取车时间' : '实际取车时间'
      case '还车单':
        return type === 'expect' ? '预计还车时间' : '实际还车时间'
    }
  }

  const getValue = (record: any, type: string) => {
    switch (record.label) {
      case '交车单':
        return type === 'expect' ? form.value?.expectUseCarTime : form.value?.realUseCarTime
      case '还车单':
        return type === 'expect' ? form.value?.expectReturnCarTime : form.value?.realReturnCarTime
    }
  }

  const getTypeLabel = (record: any) => {
    switch (record.label) {
      case '交车单':
        return '交车信息'
      case '还车单':
        return '还车信息'
    }
  }

  const getTypeValue = (record: any) => {
    switch (record.label) {
      case '交车单':
        return form.value?.address
      case '还车单':
        return form.value?.returnAddress
    }
  }

  const handleChange = (val: any, type?: string) => {
    getChangeCarOrder({
      workOrderId: val,
    }).then((res: any) => {
      switch (type) {
        case 'pre':
          titleIndex.value--
          break
        case 'next':
          titleIndex.value++
          break
      }
      form.value = res.result
    })
  }

  const handleClickGo = (type: string, params: any) => {
    console.log('params', params)

    switch (type) {
      case 'work':
        uni.navigateTo({
          url: `/pages/work/workOrder/list?workOrderCode=${form.value.workOrderNo}`,
        })
        popupRef.value.close()
        break
      case 'order':
        if (params.orderType === 1) {
          uni.navigateTo({
            url: `/pages/order/short-order/detail/index?id=${params.orderId}`,
          })
        } else {
          uni.navigateTo({
            url: `/pages/order/long-order/detail/index?id=${params.orderId}`,
          })
        }
        popupRef.value.close()
        break
    }
  }

  const getWorkOrderColor = (type: number) => {
    switch (type) {
      case 3:
        return '#FF7D00'
      case 4:
        return 'rgb(0, 180, 42)'
      case 5:
        return 'rgb(134, 144, 156)'
    }
  }

  const getWorkOrderBg = (type: number) => {
    switch (type) {
      case 3:
        return '#FFF7E8'
      case 4:
        return 'rgb(232, 255, 234)'
      case 5:
        return 'rgb(242, 243, 245)'
    }
  }

  const onChangePopup = (options: any) => {
    if (!options.show) {
      titleIndex.value = 1
    }
  }

  const onClose = () => {
    popupRef.value.close()
  }

  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .content {
    width: 351px;
    padding: 12px 16px 0 16px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: inset 0px 0px 0px 0px #e5e6eb;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(216, 216, 216, 0.3);
      margin-bottom: 8px;
      .header-title {
        font-size: 17px;
        color: #1d2129;
        font-weight: 500;
      }
    }

    .body {
      padding-bottom: 8px;

      .cell {
        display: flex;
        align-items: center;
        min-height: 32px;

        .label {
          width: 90px;
          height: 100%;
          font-weight: 400;
          font-size: 15px;
          color: #8491a8;
        }
        .value {
          flex: 1;
          height: 100%;
          padding-left: 10px;
          font-weight: 400;
          font-size: 14px;
          color: #191c27;

          .fillet-label {
            padding-left: 6px;
          }

          .link {
            display: inline-block;
            color: #1890ff;
          }
        }
      }
    }
    .footer {
      display: flex;
      justify-content: space-between;
      border-top: 1px solid rgba(216, 216, 216, 0.3);

      .footer-btn {
        flex: 1;
        font-size: 12px;
        height: 40px;
        border-right: 1px solid rgba(216, 216, 216, 0.3);

        &:last-child {
          border-right: none;
        }
      }
    }
  }
</style>
